<script setup>
import { isCollapse } from './isCollapse';
</script>

<template>
 <el-aside>
   
    <el-menu router unique-opened  :collapse="isCollapse">
        <a href="/" class="logo">
            <img src="@/assets/logo.svg" alt="">
            <h1>阳阳阳</h1>
        </a>
     <el-sub-menu index="1">
        <template #title>
            <el-icon>  <IEpLock/>  </el-icon> <span>权限管理</span>
        </template>
        <el-menu-item index="/resources">
            <el-icon>   <IEpSetting/></el-icon> <span> 资源列表</span>
        </el-menu-item>
         <el-menu-item index="/roles">
            <el-icon>   <IEpSetting/></el-icon> <span> 角色列表</span>
        </el-menu-item>
         <el-menu-item index="/menus">
            <el-icon>   <IEpSetting/></el-icon> <span> 菜单列表</span>
        </el-menu-item>
        
     </el-sub-menu>


        <el-menu-item index="/users">
            <el-icon>  <IEpUser/>  </el-icon> <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/courses">
            <el-icon>  <IEpFilm/>  </el-icon> <span>课程管理</span>
        </el-menu-item>
    
    </el-menu>
     
 </el-aside>
</template>

<style lang="scss" scoped>
.el-aside{
  background-color: #eee;
  width: 100vh;
  width: auto;
  border-right: none;
}

.el-menu{
  width: 200px;
  white-space: nowrap;
  background-color: #eee;
  //同时具有两个类名时
  &.el-menu--collapse{
    width: 60px;
    //当菜单折叠时隐藏文字
    & h1{
        display: none;
    }
  }
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    text-decoration: none;
    color:black;
     img{
        width:32px;
        height: 32px;
    }
}
</style>